import React, { Component } from 'react'
import './index.css';
export default class Footer extends Component {
    render() {
        return (
            <div className="todo-footer">
                <label>
                    <input type="checkbox" checked={this.props.todos.every(item => item.done)} onChange={this.checkAllTodo}/>
                </label>
                <span>
                    <span>已完成 {this.props.todos.filter(item => item.done === true).length} </span> / 全部 {this.props.todos.length}
                </span>
                <button className="btn btn-danger" onClick={this.removeDoneTodos}>清除已完成任务</button>
            </div>
        )
    }

    checkAllTodo = (e) => {
        //完整写法
        // if(e.target.checked){
        //     this.props.checkAllTodo(true);
        // }else{
        //     this.props.checkAllTodo(false);
        // }

        //简写
        this.props.checkAllTodo(e.target.checked);
    }

    removeDoneTodos = () => {
        //移除已经完成的任务
        this.props.removeDoneTodos();
    }
}
